<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/cssreset.css" />
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/style.css" />
</head>

<body>
    <!-- 头部 -->
    <section class="topbar">
        <div class="content wrap">
            <div class="dz"><span>广东&nbsp;&nbsp;&nbsp;▾</span></div>
            <ul class="list">
                <li><a href="#">请登录</a></li>
                <span>/</span>
                <li><a href="#">注册</a></li>
                <span>/</span>
                <li><a href="#">我的订单</a></li>
                <span>/</span>
                <li><a href="#">我的特卖▾</a></li>
                <span>/</span>
                <li><a href="#">会员俱乐▾</a></li>
                <span>/</span>
                <li><a href="#">部客户服务▾</a></li>
                <span>/</span>
                <li class="phone"><span class="p"></span><a href="#">手机版</a></li>
                <span>/</span>
                <li><a href="#">更多▾</a></li>
            </ul>
        </div>

    </section>
    <!-- 右边导航栏 -->
    <div class="right-bar">
        <ul>
            <li><span class="iconfont icon-zhanghao"></span></span>账号</li>
            <li class="shop"><span class="gw"></span>
                <span>购</span><span>物</span><span>袋</span>
                <div class="num">0</div>
            </li>
            <li class="yh"><span class="iconfont icon-youhuiquan"></span>
                <div class="youhuiquan">

                    <a href="#">我的优惠卷</a>
                </div>
            </li>
            <li class="sc"><span class="iconfont icon-shoucang"></span>
                <div class="shoucang">
                    <a href="#"> 品牌收藏</a>
                </div>
            </li>
            <li class="jx"><span class="iconfont icon-jingxuan"></span>
                <div class="jingxuan">
                    <a href="#">商品收藏</a>
                </div>
            </li>
            <li class="zj">
                <span class="iconfont icon-zuji"></span>
                <div class="zuji">
                    <a href="#">我的足迹</a>
                </div>
            </li>
        </ul>
    </div>
    <section class="header">
        <div class="content wrap">
            <div class="left">
            </div>
            <ul class="right">
                <li class="li1"></li>
                <li class="li2"></li>
                <li class="li3"></li>
                <li class="li4"></li>
                <li class="text">
                    <div class="num">0</div><a href="#">我的购物袋</a></li>
            </ul>
        </div>
    </section>
    <!-- 导航栏 -->
    <section class="navs">
        <div class="navs-list content">
            <ul class="left">
                <li><a href="#">首页</a></li>
                <li><a href="#">唯品国际</a></li>
                <li><a href="#">母婴</a></li>
                <li><a href="#">家居家电</a></li>
                <li><a href="#">男士</a></li>
                <li><a href="#">美妆</a></li>
                <li><a href="#">生活超市</a></li>
                <li><a href="#">金融</a></li>
                <li><a href="#">更多▾</a></li>
            </ul>
            <ul class="right">
                <li><a href="#"><span class="iconfont icon-fenlei1"></span> 分类</a></li>
                <span class="s">|</span>
                <li><a href="#"><span class="iconfont icon-yugao"></span> 预告</a></li>
            </ul>
        </div>

    </section>
    <!-- 轮播图 -->
    <section class="banner">
        <div id="sweep" class="content sweep">
            <img class="current" src="./images/banner1.png" alt="">
            <img src="./images/banner2.png" alt="">
            <img src="./images/banner3.png" alt="">
            <img src="./images/banner4.png" alt="">
            <ul class="tab">
                <li class="current">UA品牌钜献 全场6折起</li>
                <span>|</span>
                <li>热辣沙 滩最高满198减40</li>
                <span>|</span>
                <li>母婴冰点盛宴</li>
                <span>|</span>
                <li>宝姿VIP大牌日 立抢红包</li>
            </ul>
        </div>
    </section>

    <!-- 热销榜 -->
    <section class="hot">
        <div class="content hot-banner">
            <ul>
                <li><img src="./images/hot1.jpg" alt="">
                    <p></p>
                </li>
                <li><img src="./images/hot2.jpg" alt="">
                    <p></p>
                </li>
                <li><img src="./images/hot3.jpg" alt="">
                    <p></p>
                </li>

            </ul>
        </div>
    </section>
    <!-- 新人优选 -->
    <section class="new">
        <h2><img src="./images/new.jpg" alt=""></h2>
        <div class="content new-list">
            <ul>
                <li>
                    <a href="#"><img src="./images/new1.jpg" alt=""></a>
                    <span>美妆馆</span>
                </li>
                <li>
                    <a href="#"><img src="./images/new2.jpg" alt=""></a>
                    <span>鞋包馆</span>
                </li>
                <li>
                    <a href="#"><img src="./images/new3.jpg" alt=""></a>
                    <span>男装馆</span>
                </li>
                <li>
                    <a href="#"><img src="./images/new4.jpg" alt=""></a>
                    <span>体用馆</span>
                </li>
                <li>
                    <a href="#"><img src="./images/new5.jpg" alt=""></a>
                    <span>母婴馆</span>
                </li>
                <li>
                    <a href="#"><img src="./images/new6.jpg" alt=""></a>
                    <span>国家馆</span>
                </li>
                <li>
                    <a href="#"><img src="./images/new7.jpg" alt=""></a>
                    <span>人气零食</span>
                </li>
                <li>
                    <a href="#"><img src="./images/new8.jpg" alt=""></a>
                    <span>更多分类</span>
                </li>
            </ul>
            <div class="new-list2">
                <div class="new_clothes">
                    <img src="./images/new_clothes.jpg" alt="">
                    <ul>
                        <li>
                            <a href="#"><img src="./images/clothes01.jpg" alt=""></a>
                            <span>连衣裙</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/clothes02.jpg" alt=""></a>
                            <span>省心套装</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/clothes03.jpg" alt=""></a>
                            <span>半身裙</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/clothes04.jpg" alt=""></a>
                            <span>百搭T恤</span>
                        </li>
                    </ul>
                </div>
                <div class="new_beauty"><img src="./images/new_beauty.jpg" alt="">
                    <ul>
                        <li>
                            <a href="#"><img src="./images/beauty01.jpg" alt=""></a>
                            <span>人气彩妆</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/beauty02.jpg" alt=""></a>
                            <span>护肤套装</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/beauty03.jpg" alt=""></a>
                            <span>口碑面膜</span>
                        </li>
                        <li>
                            <a href="#"><img src="./images/beauty04.jpg" alt=""></a>
                            <span>清爽水乳</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <!-- 新特卖 -->
    <section class="today">
        <!-- 左边导航栏 -->
        <div class="leftlist">
            <ul>
                <li>精选</li>
                <li>女装</li>
                <li>鞋包</li>
                <li>男士</li>
                <li>运动</li>
                <li>饰品</li>
                <li>美妆</li>
                <li>母婴</li>
                <li>居家</li>
                <li>国际</li>
                <li>生活</li>
                <li>预告</li>
            </ul>
        </div>
        <h2><img src="./images/today_DDp.png" alt=""></h2>
        <div class="content today-img">
            <div class="left">
                <img class="today1-img" src="./images/today1.jpg" alt="">
                <div class="box">
                    <div class="box2">
                        <ul>
                            <li>
                                <a href="#"><img src="./images/today_list1.jpg" alt=""></a>
                                <span>￥1198</span>
                            </li>
                            <li>
                                <a href="#"><img src="./images/today_list2.jpg" alt=""></a>
                                <span>￥1148</span>
                            </li>
                            <li>
                                <a href="#"><img src="./images/today_list3.jpg" alt=""></a>
                                <span>￥698</span>
                            </li>
                        </ul>
                    </div>
                    <div class="box3">
                        <img src="./images//today1_logo.jpg" alt="">
                        <div class="box4">
                            <a href="#">
                                进入专场
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <img src="./images/today2.jpg" alt="">
                <div class="right-box">
                    <img src="./images/today2_logo.png" alt="">
                    <p class="tit">雅意新韵 至美绽放</p>
                    <p class="txt">购物即享折上8.5折优惠</p>
                </div>
            </div>

        </div>
        <div class="content today-img2">
            <img src="./images/today3.png" alt="">
            <img src="./images/today4.png" alt="">
        </div>
    </section>
    <!-- 女装品牌 -->
    <section class="woman">
        <div class="content">
            <div class="woman-txt">
                <img src="./images/woman_2ad.png" alt="">
                <p><span>全部女装品牌</span> <span class="iconfont icon-weibiaoti1"></span></p>
            </div>
            <div class="woman-img">
                <div class="woman1">
                    <img src="./images/woman1.jpg" alt="">
                    <div class="title">
                        <p class="lg"></p><span>购物满2件即享8.5折,满3件即享8折</span>
                    </div>
                </div>
                <div class="woman2">
                    <img src="./images/woman2.jpg" alt="">
                    <div class="title">
                        <p class="lg"></p>
                        <span>购物即享折上7折优惠</span>
                    </div>
                </div>
            </div>
            <div class="woman-text">
                <div class="text1">
                    <p><span>2.5</span>折起&nbsp;&nbsp;&nbsp;拉夏贝尔旗下品牌女装专场</p>
                    <p class="time">剩18时</p>
                </div>
                <div class="text2">
                    <p><span>0.5</span>折起&nbsp;&nbsp;&nbsp;反季清仓-主格excZeOlOlZent女装专场</p>
                    <p class="time">剩5天</p>
                </div>
            </div>
            <div class="woman-img2">
                <div class="woman1">
                    <img src="./images/woman3.png" alt="">

                </div>
                <div class="woman2">
                    <img src="./images/woman4.png" alt="">
                </div>
            </div>
            <div class="woman-text2">
                <div class="text1">
                    <p><span>1.6</span>折起&nbsp;&nbsp;&nbsp;玛丝菲尔Marisfrolg女装专场</p>
                    <p class="time">剩5天</p>
                </div>
                <div class="text2">
                    <p><span>1.7</span>折起&nbsp;&nbsp;&nbsp;DAZZLE女装专场</p>
                    <p class="time">剩3天</p>
                </div>
            </div>
        </div>
    </section>
    <section class="title">
        <div class="content tit">
            <h2>逛更多女装品牌 </h2>
        </div>
    </section>
    <section class="fashion">
        <div class="fashion_peopel">
            <img src="./images/fashion_peopel.jpg" alt="">

        </div>
        <div class="box">
            <div class="box2">
                <img src="./images/fashion_logo.png" alt="">
                <p class="txt">轻奢大牌 时尚臻品</p>
                <a href="#">
                    <p class="link">进入频道 ></p>
                </a>
            </div>

        </div>
    </section>
    <!-- 鞋包品牌 -->
    <section class="shoes">
        <div class="content">
            <div class="shoes-txt">
                <img src="./images/shoe.png" alt="">
                <p> <span>全部鞋包品牌</span> <span class="iconfont icon-weibiaoti1"></span></p>
            </div>
            <div class="shoes-img">
                <div class="shoes1">
                    <img src="./images/shoes1.jpg" alt="">
                    <div class="title">
                        <p class="lg"></p>
                        <span>满198减40,上不封顶</span>
                    </div>
                </div>
                <div class="shoes2">
                    <img src="./images/shoes2.jpg" alt="">
                    <div class="title">
                        <p class="lg"></p>
                        <span>满198减40,上不封顶</span>
                    </div>
                </div>
            </div>
            <div class="shoes-text">
                <div class="text1">
                    <p><span>1.5</span>折起&nbsp;&nbsp;&nbsp;涉趣selftrend女鞋专场</p>
                    <p class="time">剩4天时</p>
                </div>
                <div class="text2">
                    <p><span>1.4</span>折起&nbsp;&nbsp;&nbsp;优哈.优哈HOW.R.U箱包专场</p>
                    <p class="time">剩2天</p>
                </div>
            </div>
            <div class="shoes-img2">
                <div class="shoes1">
                    <img src="./images/shoes3.png" alt="">

                </div>
                <div class="shoes2">
                    <img src="./images/shoes4.png" alt="">
                </div>
            </div>
            <div class="shoes-text2">
                <div class="text1">
                    <p><span>1</span>折起&nbsp;&nbsp;&nbsp;卡洛黛茜C ORALDAISY皮具专场</p>
                    <p class="time">剩4天</p>
                </div>
                <div class="text2">
                    <p><span>1.3 </span>折起&nbsp;&nbsp;&nbsp;ZGR女鞋专场</p>
                    <p class="time">剩2 天</p>
                </div>
            </div>
        </div>
    </section>
    <section class="title2">
        <div class="content tit">
            <h2>逛更多鞋包品牌 </h2>
        </div>
    </section>
    <!-- 明日预告 -->
    <section class="tomorrowbox">
        <div class="tomorrowtitle">
            <img src="./images//tomorrow.png" alt="">
        </div>
        <div class="tomorrowlist">
            <ul>
                <li class="tomorrowlis">
                    <div class="tomtxt1">抢先挑好货 ></div>
                    <div class="tomtxt2"><img src="./images/index_imgs1.png" alt="">购物满1件即享8.5折，满2...</div>
                    <div class="tomtxt3">拉夏贝尔女装专场</div>
                </li>
                <li class="tomorrowlis">
                    <div class="tomtxt1">抢先挑好货 ></div>
                    <div class="tomtxt2"><img src="./images/index_imgs1.png" alt="">购物满1件即享8.5折，满2...</div>
                    <div class="tomtxt3">拉夏贝尔女装专场</div>
                </li>
                <li class="tomorrowlis">
                    <div class="tomtxt1">抢先挑好货 ></div>
                    <div class="tomtxt2"><img src="./images/index_imgs1.png" alt="">购物满1件即享8.5折，满2...</div>
                    <div class="tomtxt3">拉夏贝尔女装专场</div>
                </li>
                <li class="tomorrowlis">
                    <div class="tomtxt1">抢先挑好货 ></div>
                    <div class="tomtxt2"><img src="./images/index_imgs1.png" alt="">购物满1件即享8.5折，满2...</div>
                    <div class="tomtxt3">拉夏贝尔女装专场</div>
                </li>
                <li class="tomorrowlis">
                    <div class="tomtxt1">抢先挑好货 ></div>
                    <div class="tomtxt2"><img src="./images/index_imgs1.png" alt="">购物满1件即享8.5折，满2...</div>
                    <div class="tomtxt3">拉夏贝尔女装专场</div>
                </li>
                <li class="tomorrowlis">
                    <div class="tomtxt1">抢先挑好货 ></div>
                    <div class="tomtxt2"><img src="./images/index_imgs1.png" alt="">购物满1件即享8.5折，满2...</div>
                    <div class="tomtxt3">拉夏贝尔女装专场</div>
                </li>
                <li class="tomorrowlis">
                    <div class="tomtxt1">抢先挑好货 ></div>
                    <div class="tomtxt2"><img src="./images/index_imgs1.png" alt="">购物满1件即享8.5折，满2...</div>
                    <div class="tomtxt3">拉夏贝尔女装专场</div>
                </li>
                <li class="tomorrowlis">
                    <div class="tomtxt1">抢先挑好货 ></div>
                    <div class="tomtxt2"><img src="./images/index_imgs1.png" alt="">购物满1件即享8.5折，满2...</div>
                    <div class="tomtxt3">拉夏贝尔女装专场</div>
                </li>
                <li class="tomorrowlis">
                    <div class="tomtxt1">抢先挑好货 ></div>
                    <div class="tomtxt2"><img src="./images/index_imgs1.png" alt="">购物满1件即享8.5折，满2...</div>
                    <div class="tomtxt3">拉夏贝尔女装专场</div>
                </li>
                <li class="tomorrowlis">
                    <div class="tomtxt1">抢先挑好货 ></div>
                    <div class="tomtxt2"><img src="./images/index_imgs1.png" alt="">购物满1件即享8.5折，满2...</div>
                    <div class="tomtxt3">拉夏贝尔女装专场</div>
                </li>
            </ul>
        </div>
    </section>
    <!-- 页面尾部 -->
    <section class="footer">
        <div class="foolist1">
            <ul>
                <li>
                    <div class="foolis1"></div>
                    <span>中国第三</span>
                </li>
                <li>
                    <div class="foolis2"></div>
                    <span>全球直采</span>
                </li>
                <li>
                    <div class="foolis3"></div>
                    <span>一手货源</span>
                </li>
                <li>
                    <div class="foolis4"></div>
                    <span>入仓全检</span>
                </li>
                <li>
                    <div class="foolis5"></div>
                    <span>自营物流</span>
                </li>
                <li>
                    <div class="foolis6"></div>
                    <span>线下验真</span>
                </li>
                <li>
                    <div class="foolis7"></div>
                    <span>假货必赔</span>
                </li>
                <li>
                    <div class="foolis8"></div>
                    <span>任意退货</span>
                </li>
                <li>
                    <div class="foolis9"></div>
                    <span>万千信赖</span>
                </li>
                <li>
                    <div class="foolis10"></div>
                    <span>权威荣誉</span>
                </li>
            </ul>
        </div>
        <div class="foolist2">
            <div class="pay">
                <div>支付方式</div>
                <ul>
                    <li>•快捷支付</li>
                    <li>•23家主流网银支付</li>
                    <li>•货到付款</li>
                    <li>•支付宝、银联等支付</li>
                    <li>•信用卡支付</li>
                    <li>•零钱支付</li>
                </ul>
            </div>
            <div class="pay">
                <div>支付方式</div>
                <ul>
                    <li>•快捷支付</li>
                    <li>•23家主流网银支付</li>
                    <li>•货到付款</li>
                    <li>•支付宝、银联等支付</li>
                    <li>•信用卡支付</li>
                    <li>•零钱支付</li>
                </ul>
            </div>
            <div class="pay">
                <div>支付方式</div>
                <ul>
                    <li>•快捷支付</li>
                    <li>•23家主流网银支付</li>
                    <li>•货到付款</li>
                    <li>•支付宝、银联等支付</li>
                    <li>•信用卡支付</li>
                    <li>•零钱支付</li>
                </ul>
            </div>
            <div class="pay">
                <div>支付方式</div>
                <ul>
                    <li>•快捷支付</li>
                    <li>•23家主流网银支付</li>
                    <li>•货到付款</li>
                    <li>•支付宝、银联等支付</li>
                    <li>•信用卡支付</li>
                    <li>•零钱支付</li>
                </ul>
            </div>
            <div class="pay">
                <div>支付方式</div>
                <ul>
                    <li>•快捷支付</li>
                    <li>•23家主流网银支付</li>
                    <li>•货到付款</li>
                    <li>•支付宝、银联等支付</li>
                    <li>•信用卡支付</li>
                    <li>•零钱支付</li>
                </ul>
            </div>
            <div class="qr">
                <span>唯品会APP二维码</span>
                <img src="./images/page_bottom_dl_n.png" alt="">
                <span>下载唯品会移动APP</span>
            </div>
        </div>
        <div class="footerbar">
            <ul>
                <li>关于我们</li>
                <li>About us</li>
                <li>Investor Relations</li>
                <li>媒体报道</li>
                <li>品牌招商</li>
                <li>隐私条款</li>
                <li>唯品诚聘</li>
                <li>365爱心基金</li>
                <li>唯品卡</li>
                <li>唯品地图</li>
                <li>品牌大全</li>
                <li>联系我们</li>
            </ul>
            <div class="copyright">
                <span class="span1">Copyright ? 2008-2017 vip.com，All Rights Reserved
                        使用本网站即表示接受唯品会用户协议。版权所有 <span class="sp">广州唯品会信息科技有限公司</span>
                </span><br>
                <div class="span2"><img src="./images/police_icon.png" alt="">粤公网安备 44010302111111号 粤ICP备08114786号 ICP经营许可证：粤B2-20080329 网络文化经营许可证：粤网文〔2015〕1528-229 </div>
                <br>
                <span class="span2">自营主体经营证照 风险监测信息 互联网药品交易服务资格证（粤C20140002）</span>
                <div class="tp">
                    <img src="./images/footer_03.jpg" alt="">
                    <img src="./images/footer_04.jpg" alt="">
                    <img src="./images/footer_05.jpg" alt="">
                    <img src="./images/footer_06.jpg" alt="">
                    <img src="./images/footer_07.jpg" alt="">
                    <img src="./images/footer_08.jpg" alt="">
                    <img src="./images/footer_09.jpg" alt="">
                </div>
            </div>
        </div>
    </section>
</body>

</html>
<!-- 轮播图 -->
<script>
    var imgs = document.getElementById("sweep").getElementsByTagName("img")
        // console.log(imgs);
    var lis = document.getElementById("sweep").getElementsByTagName("li")
    console.log(lis);
    for (i = 0; i < lis.length; i++) {
        lis[i].setAttribute("ii", i)
        lis[i].onclick = function() {
            for (j = 0; j < lis.length; j++) {
                lis[j].className = "";
                imgs[j].className = "";
            }
            this.className = "current";
            imgs[this.getAttribute("ii")].className = "current";
        }

    }
    var num = 0;

    function a() {
        num++;
        if (num > lis.length - 1) {
            num = 0;
        }
        // console.log(num);
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = "";
            imgs[i].className = "";
        }
        lis[num].className = 'current'
        imgs[num].className = 'current'
    }
    var time = setInterval(a, 1500);



    // var over = document.getElementById("sweep")

    // over.onmouseenter = function() {
    //     // console.log(1);
    //     clearInterval(time);
    // }
    // over.onmouseleave = function() {
    //     // console.log(2);
    //     var time = setInterval(a, 1500);
    // }
</script>